import React, { Component } from 'react';
import { View, Dimensions, Image, Text, Slider, TouchableWithoutFeedback, TouchableOpacity, StyleSheet } from 'react-native';
import Video from 'react-native-video';
import Orientation from 'react-native-orientation-locker';
// import Barrage from '../Barrage/Barrage'
import ShareAlertDialog from "../More/ShareAlertDialog";//更多

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

function formatTime(second) {
  let h = 0, i = 0, s = parseInt(second);
  if (s > 60) {
    i = parseInt(s / 60);
    s = parseInt(s % 60);
  }
  // 补零
  let zero = function (v) {
    return (v >> 0) < 10 ? "0" + v : v;
  };
  return [zero(h), zero(i), zero(s)].join(":");
}

export default class VideoPlayScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videoUrl: "http://124.129.157.208:8810/SD/2017qingdao/xiaoxueEnglish/grade3/b/1.mp4",
      videoCover: "http://124.129.157.208:8889/data/uploads/kecheng/2018/01/18/5a600b2c99836.png@0o_0l_220w.png",
      videoWidth: screenWidth,
      videoHeight: screenWidth * 9 / 16, // 默认16：9的宽高比
      showVideoCover: true,    // 是否显示视频封面
      showVideoControl: false, // 是否显示视频控制组件
      isPlaying: false,        // 视频是否正在播放
      currentTime: 0,        // 视频当前播放的时间
      duration: 0,           // 视频的总时长
      isFullScreen: false,     // 当前是否全屏显示
      playFromBeginning: false, // 是否从头开始播放
      showSharePop: false,//分享弹窗，默认不显示
    };
  }

  _share() {
    this.setState({ showSharePop: !this.state.showSharePop })
  }

  render() {
    return (
      <View style={styles.container} onLayout={this._onLayout}>
        {
          this.state.showVideoControl ?
            <View style={[styles.backShare, { width: this.state.videoWidth }]}>
              <TouchableOpacity activeOpacity={0.3} onPress={() => {
                this.props.navigation.navigate('Classify')
              }}>
                <Image
                  style={{ flexDirection: 'row', width: 20, height: 20, marginLeft: 10 }}
                  source={require('./icon/返回.png')}
                />
              </TouchableOpacity>

              <Text style={{ color: 'white', paddingLeft: 10 }}>第一集</Text>
              <Text style={{ color: 'white', paddingLeft: 10 }}>名侦探柯南</Text>

              <Text style={{ color: 'white', paddingLeft: 160 }}></Text>

              <TouchableOpacity
                activeOpacity={0.3}
                onPress={() => this._share()}
              >
                <Image
                  style={{ flexDirection: 'row', width: 19, height: 19 }}
                  source={require('./icon/更多.png')}
                />
              </TouchableOpacity>
            </View> : null
        }

        <View style={{ width: this.state.videoWidth, height: this.state.videoHeight, backgroundColor: '#000000' }}>

          {/* <Barrage /> */}


          <Video
            ref={(ref) => this.videoPlayer = ref}
            source={{ uri: this.state.videoUrl }}
            rate={1.0}
            volume={1.0}
            muted={false}
            paused={!this.state.isPlaying}
            resizeMode={'contain'}
            playWhenInactive={false}
            playInBackground={false}
            ignoreSilentSwitch={'ignore'}
            progressUpdateInterval={250.0}
            onLoadStart={this._onLoadStart}
            onLoad={this._onLoaded}
            onProgress={this._onProgressChanged}
            onEnd={this._onPlayEnd}
            onError={this._onPlayError}
            onBuffer={this._onBuffering}
            style={{ width: this.state.videoWidth, height: this.state.videoHeight }}
          />
          {
            this.state.showVideoCover ?
              <Image
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: this.state.videoWidth,
                  height: this.state.videoHeight
                }}
                resizeMode={'cover'}
                source={{ uri: this.state.videoCover }}
              /> : null
          }
          <TouchableWithoutFeedback onPress={() => { this.hideControl() }}>
            <View
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: this.state.videoWidth,
                height: this.state.videoHeight,
                backgroundColor: this.state.isPlaying ? 'transparent' : 'rgba(0, 0, 0, 0.2)',
                alignItems: 'center',
                justifyContent: 'center'
              }}>
              {
                this.state.isPlaying ? null :
                  <TouchableWithoutFeedback onPress={() => { this.onPressPlayButton() }}>
                    <Image
                      style={styles.playButton}
                      source={require('./icon/开始播放.png')}
                    />
                  </TouchableWithoutFeedback>
              }
            </View>
          </TouchableWithoutFeedback>
          {
            this.state.showVideoControl ?
              <View style={[styles.control, { width: this.state.videoWidth }]}>
                <TouchableOpacity activeOpacity={0.3} onPress={() => { this.onControlPlayPress() }}>
                  <Image
                    style={styles.playControl}
                    source={this.state.isPlaying ? require('./icon/播放.png') : require('./icon/暂停.png')}
                  />
                </TouchableOpacity>
                <Text style={styles.time}>{formatTime(this.state.currentTime)}</Text>
                <Slider
                  style={{ flex: 1 }}
                  maximumTrackTintColor={'lightgray'}
                  minimumTrackTintColor={'white'}
                  thumbTintColor={'white'}
                  thumbImage={require('./icon/播放.png')}
                  value={this.state.currentTime}
                  minimumValue={0}
                  maximumValue={this.state.duration}
                  onValueChange={(currentTime) => { this.onSliderValueChanged(currentTime) }}
                />
                <Text style={styles.time}>{formatTime(this.state.duration)}</Text>
                <TouchableOpacity activeOpacity={0.3} onPress={() => { this.onControlShrinkPress() }}>
                  <Image
                    style={styles.shrinkControl}
                    source={this.state.isFullScreen ? require('./icon/收起全屏.png') : require('./icon/全屏.png')}
                  />
                </TouchableOpacity>
              </View> : null
          }
        </View>


        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('Classify')
            }}>
            <Image
              style={{ width: 40, height: 40 }}
              source={require('./icon/更多.png')}
            />
          </TouchableOpacity>
        </View>


        <ShareAlertDialog show={this.state.showSharePop} closeModal={(show) => {
          this.setState({
            showSharePop: show,
          })
        }} />


      </View>
    )
  }

  /// -------Video组件回调事件-------

  _onLoadStart = () => {
    console.log('视频开始加载');
  };

  _onBuffering = () => {
    console.log('视频缓冲中...')
  };

  _onLoaded = (data) => {
    console.log('视频加载完成');
    this.setState({
      duration: data.duration,
    });
  };

  _onProgressChanged = (data) => {
    console.log('视频进度更新');
    if (this.state.isPlaying) {
      this.setState({
        currentTime: data.currentTime,
      })
    }
  };

  _onPlayEnd = () => {
    this.setState({
      currentTime: 0,
      isPlaying: false,
      playFromBeginning: true
    });
  };

  _onPlayError = () => {
    console.log('视频播放失败');
  };

  ///-------控件点击事件-------

  /// 控制播放器工具栏的显示和隐藏
  hideControl() {
    if (this.state.showVideoControl) {
      this.setState({
        showVideoControl: false,
      })
    }
    else {
      this.setState(
        {
          showVideoControl: true,
        },
        // 5秒后自动隐藏工具栏
        () => {
          setTimeout(
            () => {
              this.setState({
                showVideoControl: false
              })
            }, 5000
          )
        }
      )
    }
  }

  /// 点击了播放器正中间的播放按钮
  onPressPlayButton() {
    let isPlay = !this.state.isPlaying;
    this.setState({
      isPlaying: isPlay,
      showVideoCover: false
    });
    if (this.state.playFromBeginning) {
      this.videoPlayer.seek(0);
      this.setState({
        playFromBeginning: false,
      })
    }
  }

  /// 点击了工具栏上的播放按钮
  onControlPlayPress() {
    this.onPressPlayButton();
  }

  //   enterFullScreen(){ //1.改变宽高  2.允许进入全屏模式  3.如何配置屏幕旋转,不需要改变进度条盒子的显示和隐藏
  //     this.setState({
  //         videoWidth: screenHeight,
  //         videoHeight: screenWidth,
  //         isFullScreen: true
  //     })
  //     // 直接设置方向
  //     Orientation.lockToLandscape();
  // }
  // componentDidMount() {
  //   var initial = Orientation.getInitialOrientation();
  //   if (initial === 'PORTRAIT') {
  //    console.log('是竖屏');
  //   } else {
  //       console.log('如果是横屏，就将其旋转过来');
  //       Orientation.lockToPortrait();
  //   }
  // }
  // componentWillMount() {
  //   var initial = Orientation.getInitialOrientation();
  //   if (initial === 'PORTRAIT') {
  //     Orientation.lockToPortrait();
  //   } else {
  //     Orientation.lockToLandscape();
  //   }
  // }

  /// 进度条值改变
  onSliderValueChanged(currentTime) {
    this.videoPlayer.seek(currentTime);
    if (this.state.isPlaying) {
      this.setState({
        currentTime: currentTime
      })
    } else {
      this.setState({
        currentTime: currentTime,
        isPlaying: true,
        showVideoCover: false
      })
    }
  }


  /// 点击了工具栏上的全屏按钮
  onControlShrinkPress() {

    if (this.state.isFullScreen) {
      Orientation.lockToPortrait();//小屏
    } else {
      Orientation.lockToLandscape();//全屏
    }
  }

  //onLayout的方法中处理 宽高变化
  _onLayout = (event) => {
    let { width, height } = event.nativeEvent.layout;
    let isLandscape = (width > height);
    if (isLandscape) {
      this.setState({
        videoWidth: width,
        videoHeight: height,
        isFullScreen: true,
      })
    } else {
      this.setState({
        videoWidth: width,
        videoHeight: width * 9 / 16,
        isFullScreen: false,
      })
    }
    Orientation.unlockAllOrientations();
  };

  // /// 点击了工具栏上的全屏按钮
  // onControlShrinkPress = (event) => {
  //   let { width, height } = event.nativeEvent.layout;
  //   if ((width > height)) {
  //     this.setState({
  //       videoWidth: width,
  //       videoHeight: height,
  //       isFullScreen: true,
  //     })
  //     Orientation.lockToLandscape();//全屏
  //   } else {
  //     this.setState({
  //       videoWidth: width,
  //       videoHeight: width * 9 / 16,
  //       isFullScreen: false,
  //     })
  //     Orientation.lockToPortrait();//小屏
  //   }
  //   Orientation.unlockAllOrientations();
  // }

  ///播放视频
  playVideo() {
    this.setState({
      isPlaying: true,
      showVideoCover: false
    })
  }

  /// 暂停播放
  pauseVideo() {
    this.setState({
      isPlaying: false,
    })
  }

  /// 切换视频并可以指定视频开始播放的时间
  switchVideo(videoURL, seekTime) {
    this.setState({
      videoUrl: videoURL,
      currentTime: seekTime,
      isPlaying: true,
      showVideoCover: false
    });
    this.videoPlayer.seek(seekTime);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  playButton: {
    width: 50,
    height: 50,
  },
  playControl: {
    width: 20,
    height: 20,
    marginLeft: 15,
  },
  shrinkControl: {
    width: 20,
    height: 20,
    marginRight: 15,
  },
  time: {
    fontSize: 12,
    color: 'white',
    marginLeft: 10,
    marginRight: 10
  },
  control: {
    flexDirection: 'row',
    height: 30,
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    position: 'absolute',
    bottom: 0,
    left: 0
  },
  backShare: {
    flexDirection: 'row',
    height: 30,
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 10
  },
});